<template>
  <div class="app-detail-list">
    <div class="top">
      <div class="most">
        <p class="title">最近最受期待</p>
        <div class="detail-list">
          <app-detail-item
            v-for="detailItem in detailList"
            :key="detailItem.id"
            :detailItem="detailItem"
            class="item"
          ></app-detail-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AppDetailItem from "@com/common/AppDetailItem";
export default {
  data() {
    return {
      detailList: null
    };
  },
  components: {
    AppDetailItem
  },
  created() {
    this.$ajax({
        method: "get",
        url: "/my/mostExpected?ci=1&limit=10&offset=0&token="
      })
        .then(res => {
          this.detailList = res.coming;
        })
        .catch(err => {
          console.log(err);
        });
    // this.$ajax
    //   .get("/my/mostExpected?ci=1&limit=10&offset=0&token=")
    //   .then(results => {
    //     if (results.status === 200) {
    //       console.log("获取数据成功...");
    //       this.detailList = results.data.coming;
    //     } else {
    //       console.log("发生未知错误，获取数据失败...");
    //     }
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
  }
};
</script>

<style lang="scss">
.app-detail-list {
  .top {
    padding: 0.32rem 0.4rem;
    background-color: #fff;
    margin-bottom: 0.266667rem;
    height: auto;

    .most {
      width: 9.2rem;

      p {
        margin: 0 0 0.32rem;
        font-size: 0.373333rem;
        color: #333;
        height: auto;
      }

      .detail-list {
        overflow: scroll;
        white-space: nowrap;
        height: auto;

        .item {
          margin-right: 0.266667rem;
        }
      }
    }
  }
}
</style>
